<template>
  <div class="table">
    <div class="content-common">
      <div class="search-top">
        <el-form :label-position="'top'" :inline="true" :model="query">
          <el-form-item label="测站名称">
            <el-input v-model="query.observer" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="监测时间">
            <el-input v-model="query.observer" placeholder="监测时间"></el-input>
          </el-form-item>
          <el-form-item label=".">
            <el-button
              type="primary"
              @click="
                page.currentPage = 1;
                getData();
              "
              >查询</el-button
            >
          </el-form-item>
        </el-form>

        <div class="right-search">
          <el-button type="primary" @click="handleAdd()">新增</el-button>
        </div>
      </div>
      <el-table :data="tableData" border class="table-common" header-cell-class-name="table-header">
        <el-table-column prop="year" label="站点名称"></el-table-column>
        <el-table-column prop="organizerName" label="接待类型"></el-table-column>
        <el-table-column prop="remark" label="项目负责人 "></el-table-column>
        <el-table-column prop="organizerName" label="接待时间"></el-table-column>
        <el-table-column prop="organizerName" label="单位"></el-table-column>
        <el-table-column prop="organizerName" label="人数"></el-table-column>
        <el-table-column prop="organizerName" label="主要人员"></el-table-column>
        <el-table-column prop="organizerName" label="事由"></el-table-column>
        <el-table-column prop="organizerName" label="现场照片"></el-table-column>

        <el-table-column label="操作" width="160">
          <template #default="scope">
            <el-button type="success" @click="handleEdit(scope.row)">编辑</el-button>

            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end">
        <el-pagination background v-model:currentPage="page.currentPage" @current-change="getData" layout="prev,total, pager, next" :total="page.totalSize"> </el-pagination>
      </el-row>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog :title="logTitle" v-model="editVisible" width="600px">
      <el-form ref="form" :rules="rules" :model="form" label-width="160px" label-position="top">
        <el-row type="flex" justify="space-between">
          <el-col :span="7">
            <el-form-item label="测站" prop="stcd">
              <el-select disabled v-model="form.stcd" filterable placeholder="请选择">
                <el-option v-for="item in stationData" :key="item.value" :label="item.stnm" :value="item.stcd"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="接待类型" prop="year">
              <el-date-picker disabled v-model="form.year" type="year" value-format="YYYY" placeholder="选择年"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="项目负责人" prop="organizer">
              <el-select v-model="form.organizer" filterable placeholder="请选择">
                <el-option v-for="item in globalUser" :key="item.userNo" :label="item.username" :value="item.userNo"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="7">
            <el-form-item label="接待时间" prop="organizer">
              <el-select v-model="form.organizer" filterable placeholder="请选择">
                <el-option v-for="item in globalUser" :key="item.userNo" :label="item.username" :value="item.userNo"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="单位">
              <el-input v-model="form.remark" placeholder="单位"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="人数">
              <el-input v-model="form.remark" placeholder="人数"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="7">
            <el-form-item label="主要人员" prop="organizer">
              <el-select v-model="form.organizer" filterable placeholder="主要人员">
                <el-option v-for="item in globalUser" :key="item.userNo" :label="item.username" :value="item.userNo"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="事由">
              <el-input v-model="form.remark" placeholder="单位"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="现场照片"> </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  sysdictviewlistDictItem,
  reportfieldManageeditdoApprove,
  reportfieldManageeditrevokeRecord,
  reportfieldManageeditsubmitRecord,
  viewPageStationInfo,
  rainfallImportRainfallDaily,
  soilWaterrunoffFieldreorganizeprogressviewpageRecord,
  soilWaterrunoffFieldreorganizeprogresssavesaveRecord,
  soilWaterrunoffFieldreorganizeprogressremovedelRecord
} from '../../../api/index';
import moment from 'moment';
export default {
  name: 'zhengbianhanshuizhibeigaidu',
  data() {
    return {
      tijiaorule: {
        status: [{ required: true, message: '必填项', trigger: 'change' }]
      },
      rules: {
        stcd: [{ required: true, message: '必填项', trigger: 'change' }],
        organizer: [{ required: true, message: '必填项', trigger: 'change' }],
        year: [{ required: true, message: '必填项', trigger: 'change' }]
      },
      shenpilog: false,
      globalUser: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      query: {
        year: globalyear
      },
      excelllog: false,
      formInline: {},
      tableData: [],

      editVisible: false,
      logTitle: '',
      pageTotal: 0,
      form: {},
      stationData: [],
      checkArr: [],
      tijiaoform: {
        status: 1
      },
      selnow: {}
    };
  },
  created() {
    this.globalUser = globalUser;
    let that = this;
    this.query.year = globalyear;
    that.getData();
    this.getstationData();
    this.getchecktype();
  },
  methods: {
    tomingxi(item) {
      this.$router.push({
        path: '/zhengbianjiangshuiguochengmingxi',
        query: item
      });
    },
    quedingtijiao() {
      this.tijiaoform.relatedNo = this.selnow.recordNo;
      let that = this;
      reportfieldManageeditdoApprove(that.tijiaoform)
        .then((e) => {
          that.$message.success('操作成功');
          that.shenpilog = false;
          that.getData();
        })
        .catch((e) => {
          console.log(err);
        });
    },
    getchecktype() {
      let that = this;
      sysdictviewlistDictItem({
        dictCode: 'ZD-000004'
      })
        .then((e) => {
          that.checkArr = e.object;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    shenpi(item) {
      this.tijiaoform.reviewer = item.reviewer;
      this.tijiaoform.relatedNo = item.recordNo;
      this.tijiaoform.approveType = 'R2';
      this.shenpilog = true;
      this.selnow = item;
    },
    getstationData() {
      let data = {
        currentPage: 1,
        pageSize: 1000
      };
      viewPageStationInfo(data).then((res) => {
        this.stationData = res.object.dataList.filter((item) => {
          return item.stType == systype;
        });
      });
    },
    daorujiangyu() {
      let that = this;
      rainfallImportRainfallDaily(that.form)
        .then((e) => {
          console.log(e);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getData() {
      let data = {
        stType: systype,
        currentPage: this.page.currentPage,
        pageSize: 10,
        stcd: stationInfo.stcd,
        year: globalyear
      };
      soilWaterrunoffFieldreorganizeprogressviewpageRecord(data).then((res) => {
        this.tableData = res.object.dataList;

        this.page = res.object.page;
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.getData();
    },
    // 删除操作
    handleDelete(row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          soilWaterrunoffFieldreorganizeprogressremovedelRecord({
            headNo: row.recordNo
          }).then((e) => {
            this.$message.success('删除成功');
            this.getData();
          });
        })
        .catch(() => {});
    },
    chehui(row) {
      this.$confirm('确定撤回吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          reportfieldManageeditrevokeRecord({
            headNo: row.recordNo
          })
            .then((e) => {
              this.getData();
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    tijiao(row) {
      this.$confirm('确定提交吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          reportfieldManageeditsubmitRecord({
            headNo: row.recordNo
          })
            .then((e) => {
              this.getData();
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    // 编辑操作
    handleEdit(row) {
      row.year = String(row.year);
      this.form = row;

      this.logTitle = '编辑参观检查';

      this.editVisible = true;
    },
    handleAdd() {
      this.logTitle = '新增参观检查';
      this.form = {
        stType: systype,
        year: globalyear,
        status: 0,
        stcd: stationInfo.stcd
      };
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      let that = this;

      this.$refs['form'].validate((valid) => {
        if (valid) {
          soilWaterrunoffFieldreorganizeprogresssavesaveRecord(that.form).then((e) => {
            this.editVisible = false;
            this.$message.success('操作成功');
            this.getData();
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>

